<template>
  <div class="product_detail">
    <div class="pd_main">
      <div class="content">
        <div class="records_item_title">{{result.courseName}}</div>
        <div class="info_item teacher">
          <span class="label">授课老师:</span>
          <span class="value limitLength">{{result.evaluator}}</span>
        </div>
        <div class="info_item startTime">
          <span class="label">上课时间:</span>
          <span class="value limitLength">{{result.startTime}}</span>
        </div>

        <!-- 课堂表现评分 -->
        <div class="info_item rating">
          <span class="label">课堂表现:</span>
          <div class="rating-display">
            <van-rate
              v-model="result.rating"
              :size="20"
              color="#ffd21e"
              void-color="#c8c9cc"
              void-icon="star"
              :count="5"
              readonly
            />
            <span class="rating-text">{{ getRatingText(result.rating) }}</span>
          </div>
        </div>

        <p class="title">课堂评价</p>
        <div class="evaluate">{{result.evaluate}}</div>
        <p class="title" v-if="result.enclosure && result.enclosure.length">课程照片</p>
        <div class="bot_list" v-if="result.enclosure && result.enclosure.length">
          <img
            v-for="(item, index) in result.enclosure"
            :key="index"
            :src="getImageUrl(item)"
            alt="图片资源加载失败"
            class="attachment-image"
            @click="previewImage(index)"
          />
        </div>
      </div>
    </div>

    <!-- 图片预览模态框 -->
    <div v-if="showPreview" class="image-preview-modal" @click="closePreview">
      <div class="modal-content">
        <span class="close-btn" @click="closePreview">&times;</span>
        <img :src="currentPreviewImage" alt="预览图片" class="preview-image" />
        <div class="image-nav">
          <button class="nav-btn prev-btn" @click.stop="prevImage" :disabled="currentImageIndex === 0">‹</button>
          <span class="image-counter">{{ currentImageIndex + 1 }} / {{ result.enclosure ? result.enclosure.length : 0 }}</span>
          <button class="nav-btn next-btn" @click.stop="nextImage" :disabled="currentImageIndex === (result.enclosure ? result.enclosure.length - 1 : 0)">›</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
  data() {
    return {
      id: '',
      result: {},
        showPreview: false,
        currentImageIndex: 0,
        currentPreviewImage: '',
        loading: false
      }
    },
    created() {
      this.id = this.$route.params.id || this.$route.query.id
      if (this.id) {
        this.getEvaluateDetail()
      } else {
        this.$toast('缺少评价ID')
        this.$router.back()
      }
    },
    methods: {
      getEvaluateDetail() {
        this.loading = true
        this.$http.getEvaluateDetailById({ id: this.id }).then(res => {
          this.loading = false
          if (res.data.code === 200) {
            this.result = res.data.result || {}
            // 确保rating字段是数字类型
            if (this.result.rating) {
              this.result.rating = parseInt(this.result.rating) || 0
            } else {
              this.result.rating = 0
            }
            // 确保enclosure是数组格式
            if (!this.result.enclosure) {
              this.result.enclosure = []
            } else if (typeof this.result.enclosure === 'string') {
              this.result.enclosure = this.result.enclosure === '' ? [] : this.result.enclosure.split(',')
            } else if (Array.isArray(this.result.enclosure)) {
              // 已经是数组，不需要处理
            } else {
              this.result.enclosure = []
            }
          } else {
            this.$toast(res.data.message || '获取评价详情失败')
          }
        }).catch(err => {
          this.loading = false
          console.log(err, 'err')
          this.$toast('获取评价详情失败')
        })
      },
      getImageUrl(item) {
        // 检查item是否已经是完整的URL
        const isFullUrl = item.startsWith('http://') || item.startsWith('https://');
        return isFullUrl ? item : item;
      },
      previewImage(index) {
        this.currentImageIndex = index
        this.currentPreviewImage = this.getImageUrl(this.result.enclosure[index])
        this.showPreview = true
        document.body.style.overflow = 'hidden'
      },
      closePreview() {
        this.showPreview = false
        document.body.style.overflow = ''
      },
      prevImage() {
        if (this.result.enclosure && this.currentImageIndex > 0) {
          this.currentImageIndex--
          this.currentPreviewImage = this.getImageUrl(this.result.enclosure[this.currentImageIndex])
        }
      },
      nextImage() {
        if (this.result.enclosure && this.currentImageIndex < this.result.enclosure.length - 1) {
          this.currentImageIndex++
          this.currentPreviewImage = this.getImageUrl(this.result.enclosure[this.currentImageIndex])
        }
      },
      // 获取评分对应的文字描述
      getRatingText(rating) {
        const ratingTexts = {
          0: '未评分',
          1: '有待改进',
          2: '一般',
          3: '良好',
          4: '优秀',
          5: '非常出色'
        }
        return ratingTexts[rating] || '未评分'
      }
    }
  }
</script>

<style lang="scss" scoped>
  .product_detail {
    width: 100%;
    height: 100vh;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    overflow-x: hidden;

    .pd_main {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      padding: 16px 0;

      .content {
        width: 100%;
        margin: 0;
        background: #ffffff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        overflow-x: hidden;
        box-sizing: border-box;

        .records_item_title {
          color: #1a1a1a;
          font-size: 18px;
          font-weight: 600;
          line-height: 1.4;
          margin-bottom: 16px;
          padding-bottom: 12px;
          border-bottom: 1px solid #f0f0f0;
        }

        .info_item {
          display: flex;
          align-items: flex-start;
          margin-top: 12px;
          font-size: 14px;
          line-height: 1.5;

          .label {
            width: 80px;
            flex-shrink: 0;
            color: #999;
          }

          .value {
            flex: 1;
            color: #666;
          }

          &.rating {
            align-items: center;

            .rating-display {
              flex: 1;
              display: flex;
              align-items: center;
              gap: 12px;

              ::v-deep .van-rate {
                display: flex;
                align-items: center;
              }

              .rating-text {
                font-size: 14px;
                color: #ff6b35;
                font-weight: 500;
                padding: 4px 8px;
                background: #fff8f6;
                border-radius: 4px;
                border: 1px solid #ffe8e1;
              }
            }
          }
        }

        .limitLength {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .title {
          font-size: 16px;
          font-weight: 600;
          margin-top: 20px;
          margin-bottom: 8px;
          color: #1a1a1a;
        }

        .evaluate {
          font-size: 14px;
          color: #333;
          line-height: 1.6;
          background: #fafafa;
          border-radius: 8px;
          padding: 16px;
          margin-top: 8px;
          white-space: pre-wrap;
          word-break: break-word;
        }

        .bot_list {
          padding: 16px 0;
          box-sizing: border-box;
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
          gap: 12px;

          img {
            width: 100%;
            height: 100px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            cursor: pointer;

            &:hover {
              transform: scale(1.02);
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            }
          }
        }
      }
    }
  }

  // 图片预览模态框样式
  .image-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;

    .modal-content {
      position: relative;
      max-width: 90%;
      max-height: 90%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .close-btn {
        position: absolute;
        top: -40px;
        right: 0;
        color: #fff;
        font-size: 30px;
        cursor: pointer;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s ease;

        &:hover {
          color: #ccc;
        }
      }

      .preview-image {
        max-width: 100%;
        max-height: 70vh;
        object-fit: contain;
        border-radius: 8px;
      }

      .image-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        gap: 20px;

        .nav-btn {
          background: rgba(255, 255, 255, 0.2);
          border: none;
          color: #fff;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          font-size: 24px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;

          &:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
          }

          &:disabled {
            opacity: 0.3;
            cursor: not-allowed;
          }
        }

        .image-counter {
          color: #fff;
          font-size: 16px;
          min-width: 60px;
          text-align: center;
        }
      }
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  // 响应式设计
  @media (max-width: 375px) {
    .product_detail {
      .pd_main {
        .content {
          width: 100%;
          margin: 0;
          padding: 16px;

          .records_item_title {
            font-size: 16px;
          }

          .bot_list {
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));

            img {
              height: 80px;
            }
          }
        }
      }
    }

    .image-preview-modal {
      .modal-content {
        max-width: 95%;
        max-height: 95%;

        .close-btn {
          top: -50px;
          right: -10px;
          font-size: 35px;
        }

        .image-nav {
          gap: 15px;

          .nav-btn {
            width: 35px;
            height: 35px;
            font-size: 20px;
          }

          .image-counter {
            font-size: 14px;
          }
        }
      }
    }
  }
</style>
